<nz-space>
  <nz-select
    *nzSpaceItem
    nzAllowClear
    nzMode="multiple"
    nzPlaceHolder="选择任务状态查询，可多选"
    [(ngModel)]="query.states"
    style="width: 300px"
  >
    <nz-option *ngFor="let state of taskStates" [nzLabel]="state.label" [nzValue]="state.name"></nz-option>
  </nz-select>
  <button *nzSpaceItem nz-button (click)="search()" [nzLoading]="isLoading" nzType="primary">
    <span nz-icon nzType="search"></span>查询
  </button>
</nz-space>

<div style="margin-top: 8px">
  <nz-table
    #table
    nzShowSizeChanger
    [nzData]="logs.content"
    [nzFrontPagination]="false"
    [nzLoading]="isLoading"
    [nzTotal]="logs.totalElements"
    [(nzPageSize)]="query.size"
    [(nzPageIndex)]="query.page"
    (nzPageIndexChange)="loadLog()"
    (nzPageSizeChange)="loadLog()"
  >
    <thead>
      <tr>
        <th id="expand" nzWidth="60px"></th>
        <th id="no" nzWidth="60px">序号</th>
        <th id="className">类</th>
        <th id="createdDate" nzWidth="180px">创建时间</th>
        <th id="state" nzWidth="150px">状态</th>
        <th id="costTime" nzWidth="150px">耗时(毫秒)</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of table.data; let i = index">
        <tr>
          <td [nzExpand]="expandSet.has(data.id)" (nzExpandChange)="onExpandChange(data.id, $event)"></td>
          <td>{{ i + 1 }}</td>
          <td>
            {{ data.className }}
          </td>
          <td>{{ data.createdDate | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
          <td>{{ taskStates | nameLabelFilterName: data.state }}</td>
          <td>{{ data.costTime | costTime }}</td>
        </tr>

        <tr [nzExpand]="expandSet.has(data.id)">
          <button
            nz-button
            [routerLink]="['/job/custom-task-manager/', data.configId]"
            nzType="dashed"
            *ngIf="showManagerBtn"
            nzBlock
          >
            <span nz-icon nzType="setting"></span>
            任务管理
          </button>

          <nz-divider nzText="运行配置" nzOrientation="left"></nz-divider>
          <p>{{ data.configSnapshot }}</p>
          <nz-divider nzText="消息" nzOrientation="left"></nz-divider>
          <p [innerText]="data.message"></p>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
</div>
